<template>
  <div class="ksd-main-user-zone">
    <div class="body-container-grid">
      <template v-for="(item,index) in specialList" :key="item.path">
        <div class="goods-item no-border-white">
          <div class="goods-item-img-container">
            <div class="image-box item-module-img" style="padding-top:56.25%;width:100%;">
              <nuxt-link :to="'/special/'+item.path" class="flex align-center" :title="item.title" :alt="item.title">
                <img
                    v-lazy="item.img"
                    class="goods-img top-image">
                <div class="item-shade">
                  <div class="collet-btn" v-if="item.pushFlag==1">推荐</div>
                  <div class="collet-btn" v-if="item.newFlag==1">新课</div>
                  <div class="collet-btn" v-if="item.hotFlag==1">热课</div>
                  <span class="classify" v-if="item.vipFlag==2">
                                vip免费
                            </span>
                  <span class="classify" v-if="item.vipFlag==3">
                                SVIP免费
                            </span>
                </div>
                <div class="type-label-box">
                  <div class="type-label">
                    {{item.categoryName}}
                  </div>
                </div>
              </nuxt-link>
            </div>
          </div>
          <div class="goods-card-container-info goods-card-container-vertical">
            <div class="content-box">
              <div class="title-box two-line-hidden" style="font-weight:600;">
                <nuxt-link :to="'/special/'+item.path" class="flex align-center" :title="item.title" :alt="item.title">{{item.title}}</nuxt-link>
              </div>
              <div class="description-box ET5 EC14 one-line-hidden  mb10 MT-4">
                <nuxt-link :to="'/special/'+item.path" class="flex align-center" :title="item.title" :alt="item.title">{{item.description || "暂无"}}</nuxt-link>
              </div>
            </div>
            <div class="social-btn-group mt5">
              <nuxt-link :to="'/special/'+item.path" class="flex align-center" :title="item.title" :alt="item.title">
                        <span class="classify" v-if="item.specialtype==1">
                              基础课
                            </span>
                <span class="classify" v-if="item.specialtype==2">
                              进阶课
                            </span>
                <span class="classify" v-if="item.specialtype==3">
                              实战课程
                            </span>
                <span class="classify" v-if="item.specialtype==4">
                              面试课
                        </span>
                <span class="pr tp3 fz14 fb">
                            <span class="praise social-btn ml3">
                              <span class="iconfont icon-eye">
                              </span>
                              <span class="count">
                                {{item.viewcount||0}}
                              </span>
                            </span>
                            <span class="like social-btn ml5">
                                <span class="iconfont icon-shoucang">
                                </span>
                                <span class="count">
                                  {{item.favNum||0}}
                                </span>
                              </span>
                          </span>
              </nuxt-link>
            </div>
            <div class="temp-item-owner flex justify-between mt10 align-items">
              <nuxt-link  class="flex align-items"  to="javascript:void(0);">
                <img v-lazy="item.avatar" :alt="item.nickname">
                <span class="owner-name pr tp1">
                            {{item.nickname}}
                          </span>
              </nuxt-link>
              <div class="item-market pc-new-price-item newStyle pr ftp2" v-if="item.payFlag==2">
                <div class="marketing-info-prices_org">
                  {{item.realprice}}
                </div>
                <div class="marketing-info-prices_dis">
                  {{item.price}}
                </div>
              </div>
              <div class="item-market pc-new-price-item newStyle pr ftp2" v-else>
                <div class="green fz14">免费</div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
    <div class="py-[60px] flex justify-center" style="width: 100%" v-if="total==0">
      <k-empty :show="total==0" url="/" btnmsg="点击前往学习课程"></k-empty>
    </div>
    <div class="mt-6"  v-if="total > pageSize">
      <n-pagination v-model:page="pageNo"
                    v-model:page-size="pageSize"
                    :display-order="['pages', 'quick-jumper', 'size-picker']"
                    show-quick-jumper
                    show-size-picker
                    :item-count="total"
                    :page-sizes="pageSizesList"
                    :on-update:page="handleLoadPage"
                    :on-update:page-size="handleLoadPageSize"
      />
    </div>
    <k-loading :show="loadingFlag"></k-loading>
  </div>
</template>
<script setup>
const pageNo = ref(1)
const pageSize = ref(15)
const total = ref(0)
const pages = ref(0)
const specialList = ref([])
const loadingFlag = ref(false)


// 加载用户发布的课程
const handleLoadSpecialData = async () => {
  loadingFlag.value = true
  const resp = await useFindMySpecialsBroswerPageApi({
    "pageNo": pageNo.value,
    "pageSize": pageSize.value
  })
  specialList.value = resp.data.records
  total.value = resp.data.total
  pages.value = resp.data.pages
  loadingFlag.value = false
}


// 点击分页执行的回调方法
const handleLoadPage = (pno) => {
  pageNo.value = pno
  handleLoadSpecialData()
  document.documentElement.scrollTop = 0
}

// 点击分页size列表的回调方法
const handleLoadPageSize = (psize) => {
  pageNo.value = 1
  pageSize.value = psize
  handleLoadSpecialData()
  document.documentElement.scrollTop = 0
}


onMounted(() => {
  handleLoadPage()
})
</script>
<style scoped>
.index .load-more-tip img {
  position: relative;
  top: 4px;
  width: 22px;
  animation: rotate-72db9d12 1.5s linear infinite
}

@keyframes rotate-72db9d12 {
  0% {
    transform: rotate(0deg)
  }
  50% {
    transform: rotate(180deg)
  }
  to {
    transform: rotate(1turn)
  }
}

.holder-block .holder-block-banner {
  height: 432px
}

.holder-block .holder-block-type-wrap {
  margin: 24px 0 0
}

.holder-block .holder-block-type-wrap .holder-block-type-item {
  display: inline-block;
  width: 282px;
  height: 120px
}

.holder-block .holder-block-type-wrap .holder-block-type-item + .holder-block-type-item {
  margin-left: 24px
}

.holder-block .holder-block-hot {
  margin: 48px 0 0
}

.holder-block .holder-block-hot .holder-block-hot-title {
  width: 100px;
  height: 33px;
  margin: 0
}

.holder-block .holder-block-hot .holder-block-hot-list {
  margin: 24px 0 0
}

.holder-block .holder-block-hot .holder-block-hot-item {
  display: inline-block;
  width: 220px;
  height: 256px
}

.holder-block .holder-block-hot .holder-block-hot-item + .holder-block-hot-item {
  margin-left: 24px
}

.goods-list .goods-content {
  display: flex;
  overflow: hidden;
  position: relative;
  align-items: center;
  margin-top: -20px;
  padding-top: 20px
}

.goods-list .goods-content .slide-area-box {
  display: flex
}

.goods-list .goods-content .list-container {
  display: flex;
  transition: transform .6s cubic-bezier(.33, 1, .68, 1)
}

.goods-list .goods-content .left, .goods-list .goods-content .right {
  position: absolute;
  z-index: 10;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, .4);
  display: none;
  border-radius: 50%;
  line-height: 40px;
  text-align: center;
  cursor: pointer
}

.goods-list .goods-content .left .arrow, .goods-list .goods-content .right .arrow {
  color: #fff;
  width: 40px;
  height: 40px
}

.goods-list .goods-content .left {
  left: 24px;
  transform: rotate(180deg)
}

.goods-list .goods-content .arrow-left {
  transform: rotate(-180deg)
}

.goods-list .goods-content .right {
  right: 24px
}

.goods-list .goods-content .left:hover, .goods-list .goods-content .right:hover {
  background: rgba(0, 0, 0, .6)
}

.goods-list .slide-area::-webkit-scrollbar {
  display: none
}

.ksd-main-user-zone .body-container-grid {
  display: grid;
  grid-template-rows:repeat(0, 1fr);
  grid-template-columns:repeat(3, 1fr)!important;
  grid-gap: 15px;
}

.ksd-main-user-zone  .body-container-grid .goods-item {
  overflow: hidden;
  width: auto !important
}

.priceBox .body-container-grid .bottom_info:first-child .newStyle, .priceBox .slide-area .bottom_info:first-child .newStyle {
  height: 18px
}

.priceBox .body-container-grid .bottom_info .newStyle, .priceBox .slide-area .bottom_info .newStyle {
  height: 30px
}

.linePriceBox .body-container-grid .bottom_info:first-child .newStyle, .linePriceBox .slide-area .bottom_info:first-child .newStyle {
  height: 12px
}

.linePriceBox .body-container-grid .bottom_info .newStyle, .linePriceBox .slide-area .bottom_info .newStyle {
  height: 24px
}

.infoBox.linePriceBox .body-container-grid .bottom_info .newStyle, .infoBox.linePriceBox .slide-area .bottom_info .newStyle {
  height: 20px
}

.infoBox.priceBox .body-container-grid .bottom_info .newStyle, .infoBox.priceBox .slide-area .bottom_info .newStyle {
  height: 26px
}

.infoBox .body-container-grid .bottom_info:first-child .newStyle:first-child, .infoBox .slide-area .bottom_info:first-child .newStyle:first-child {
  margin-top: 16px
}

.infoBox .body-container-grid .bottom_info .newStyle:first-child, .infoBox .slide-area .bottom_info .newStyle:first-child {
  margin-top: 28px
}

.title-box {
  font-size: 14px;
  line-height: 20px;
  color: #333;
  font-family: PingFang SC;
  white-space: normal;
  word-break: break-all;
  margin-bottom: 4px
}

.title-big-mode, .title-box {
  font-size: 14px;
  line-height: 24px
}

.description-box {
  color: #999;
  font-size: 12px;
  font-weight: 400;
  font-family: PingFang SC;
  line-height: 16px;
  white-space: normal;
  word-break: break-all
}

.one-line-hidden {
  white-space: nowrap !important
}

.one-line-hidden, .two-line-hidden {
  overflow: hidden;
  text-overflow: ellipsis
}

.two-line-hidden {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2
}

.card-projection, .no-border-white {
  background-color: #fff
}

.card-projection {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .04)
}

.border-white {
  border: 1px solid #e5e5e5;
  background-color: #fff
}

.no-border-transparent {
  background-color: transparent !important
}

.no-margin {
  margin-bottom: 0 !important
}

.MT-4 {
  margin-top: 4px
}

.marketing-info-prices_dis {
  height: 16px !important;
  line-height: 16px !important
}

.alive-card-container {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: var(--goods-border-radius);
  overflow: hidden;
  width: 330px;
  cursor: pointer;
  transition: transform .3s ease-in-out
}

.alive-card-container:hover {
  box-shadow: 0 4px 10px 0 rgba(51, 51, 51, .04);
  transform: translate3d(0, -8px, 0)
}

.alive-card-container-image {
  display: flex;
  flex-direction: column;
  justify-content: center
}

.alive-card-container-image .image-box {
  width: 100%;
  position: relative;
  padding-top: 32%
}

.alive-card-container-image .image-box .default-img-goods, .alive-card-container-image .image-box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.alive-card-container-image .image-box .default-img-goods {
  background: #f1f3f7
}

.alive-card-container-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 8px 12px 16px;
  overflow: hidden
}

.alive-card-container-info .content-box {
  text-align: var(--title-align) !important
}

.alive-card-container-info .title-box {
  color: #333;
  font-size: 14px;
  line-height: 24px
}

.alive-card-container .alive-type-box {
  align-items: var(--title-align) !important;
  display: flex;
  flex-direction: column-reverse
}

.alive-card-container .alive-type-box.MT-8 .newStyle {
  margin-top: 8px
}

.alive-card-container .alive-type-box.MT-8 .newStyle:first-child {
  margin-top: 0
}

.alive-card-container .alive-type-box .alive-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-grow: 0
}

.alive-card-container .alive-type-box .alive-info.center-info {
  flex-direction: column
}

.alive-card-container .alive-type-box .alive-info.center-info .MB-8 {
  margin-bottom: 8px
}

.alive-card-container .alive-type-box .alive-time-box {
  text-align: var(--title-align) !important
}

.alive-card-container .alive-type-box .alive-time-box .alive-time-text {
  height: 16px;
  border-radius: 2px;
  background: rgba(20, 114, 255, .08);
  display: flex;
  align-items: center;
  padding: 0 4px;
  color: #1472ff;
  font-size: 12px;
  font-weight: 600;
  font-family: PingFang SC;
  white-space: nowrap
}

.alive-card-container .alive-type-box .alive-type-show-box .alive-type-img-box {
  display: flex;
  align-items: center;
  height: 32px;
  color: #fff;
  font-size: 14px;
  font-family: PingFang SC;
  padding: 0 16px;
  background-color: #1472ff;
  border-radius: 4px;
  white-space: nowrap
}

.alive-card-container .alive-type-box .alive-type-show-box .alive-type-img-box .alive-type-show-icon {
  margin-right: 4px
}

.components-container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: transparent
}

.components-container .container-header {
  box-sizing: border-box;
  padding: var(--vertical_margin) var(--transverse_margin) 0
}

.components-container .container-body {
  box-sizing: border-box;
  padding: 0 var(--transverse_margin) var(--vertical_margin)
}

.components-container .container-body::-webkit-scrollbar {
  display: none
}

.body-container .body-container-grid {
  display: grid;
  justify-content: center;
  justify-items: stretch;
  align-items: stretch;
  grid-gap: var(--spacing)
}

.body-container-slider {
  white-space: nowrap
}

.body-container-slider .list-container:only-child:nth-child(n) > :not(:last-child) {
  margin-right: var(--spacing)
}

.item-market {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  height: 20px
}

.item-market .item-market-free {
  font-weight: 600;
  font-size: 16px;
  color: #333
}

.item-market .item-market-solded {
  font-size: 12px;
  color: #888
}

.item-market > .marketing-info-prices_org {
  color: #333;
  font-size: 16px;
  font-weight: 700;
  position: relative;
  padding-left: 8px;
  height: 18px;
  line-height: 18px;
  color: #ff5024
}

.item-market > .marketing-info-prices_org:before {
  content: "￥";
  position: absolute;
  left: -2px;
  bottom: 0;
  font-size: 12px
}

.item-market .marketing-info-prices_dis {
  position: relative;
  padding-left: 8px;
  height: 16px;
  line-height: 16px;
  font-size: 12px;
  color: #b2b2b2;
  margin-left: 4px;
  text-decoration: line-through
}

.item-market .marketing-info-prices_dis:before {
  content: "￥";
  position: absolute;
  left: -2px;
  bottom: 0;
  font-size: 12px
}

.item-market .margin-l-0 {
  margin-left: 0
}

.item-market .price-free {
  color: #ff5024
}

.newStyle {
  font-family: PingFang SC;
  height: auto
}

.newStyle .item-market-free {
  font-size: 18px;
  line-height: 18px
}

.newStyle .marketing-info-prices_org {
  font-size: 18px;
  line-height: 18px;
  padding-left: 9px
}

.newStyle .marketing-info-prices_org:before {
  font-size: 14px;
  left: -3px;
  bottom: -1px
}

.newStyle .marketing-info-prices_dis {
  font-size: 12px;
  line-height: 12px;
  height: 12px;
  color: #b2b2b2
}

.newStyle .marketing-info-prices_dis:before {
  font-size: 12px;
  bottom: 0
}

.title-box {
  font-size: 14px;
  line-height: 20px;
  color: #333;
  font-family: PingFang SC;
  white-space: normal;
  word-break: break-all;
  margin-bottom: 4px
}

.title-big-mode, .title-box {
  font-size: 14px;
  line-height: 24px
}

.description-box {
  color: #999;
  font-size: 12px;
  font-weight: 400;
  font-family: PingFang SC;
  line-height: 16px;
  white-space: normal;
  word-break: break-all
}

.one-line-hidden {
  white-space: nowrap !important
}

.one-line-hidden, .two-line-hidden {
  overflow: hidden;
  text-overflow: ellipsis
}

.two-line-hidden {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2
}

.card-projection, .no-border-white {
  background-color: #fff
}

.card-projection {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .04)
}

.border-white {
  border: 1px solid #e5e5e5;
  background-color: #fff
}

.no-border-transparent {
  background-color: transparent !important
}

.no-margin {
  margin-bottom: 0 !important
}

.MT-4 {
  margin-top: 4px
}

.goods-item {
  display: flex;
  flex-direction: column;
  width: 200px;
  position: relative;
  border-radius: var(--goods-border-radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform .3s ease-in-out;
  box-shadow: 0 4px 10px 0 rgba(51, 51, 51, .09);
}

.goods-item:hover {
  box-shadow: 0 4px 10px 0 rgba(51, 51, 51, .08);
  transform: translate3d(0, -8px, 0)
}

.goods-item .goods-item-img-container {
  display: flex;
  flex-direction: column;
  justify-content: center
}

.goods-item .goods-item-img-container .image-box {
  position: relative
}

.goods-item .goods-item-img-container .image-box .middle-sty {
  height: 100%;
  width: 100%;
  top: 0;
  position: absolute;
  margin: 0 auto;
  padding: 1em;
  background: hsla(0, 0%, 100%, .25) border-box;
  overflow: hidden;
  text-shadow: 0 1px 1px hsla(0, 0%, 100%, .3);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.goods-item .goods-item-img-container .image-box .middle-sty:before {
  background: var(--back-ground);
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: -30px;
  z-index: 1;
  filter: blur(20px)
}

.goods-item .goods-item-img-container .image-box .top-image {
  position: absolute;
  left: 0;
  z-index: 2;
  top: 0;
  -o-object-fit: cover;
  object-fit: cover
}

.goods-item .goods-item-img-container .image-box .default-img-goods, .goods-item .goods-item-img-container .image-box img {
  -o-object-fit: cover;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.goods-item .goods-item-img-container .image-box .default-img-goods {
  left: 50%;
  top: 50%;
  transform: translate(-50%);
  width: 42px;
  height: 36px
}

.goods-item .goods-item-img-container .image-box .goods-img {
  -o-object-fit: cover;
  object-fit: cover;
}

.goods-item .goods-item-img-container .image-box .type-label-box {
  position: absolute;
  bottom: 6px;
  right: 6px;
  border-radius: 2px;
  padding: 0 5px;
  box-sizing: border-box;
  height: 18px;
  line-height: 18px;
  background: rgba(0, 0, 0, .25);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 3
}

.goods-item .goods-item-img-container .image-box .type-label-box .type-label {
  color: #fff;
  font-size: 12px;
  font-family: PingFang SC
}

.goods-item .goods--item-default-img {
  width: 40px;
  height: 34px
}

.goods-item .goods-card-container-info {
  padding: 8px 12px 8px;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box
}

.goods-item .goods-card-container-info > :not(.bottom_info) {
  text-align: var(--title-align) !important;
  justify-content: var(--flex-align)
}

.goods-item .goods-card-container-info .item-type__learn {
  line-height: 16px
}

.goods-item .goods-card-container-info .item-type__learn .learn-count {
  font-size: 12px;
  color: #999
}

.goods-item .goods-card-container-crosswise {
  padding: 8px 12px;
  overflow: hidden
}

.goods-item .goods-card-container-crosswise .bottom_info, .goods-item .goods-card-container-crosswise .MT-12 .item-type__learn {
  margin-top: 0
}

.goods-item .goods-card-container-crosswise._3-in-row .title-box {
  font-size: 14px;
  line-height: 20px
}

.goods-item .goods-card-container-crosswise._3-in-row .description-box {
  font-size: 12px;
  line-height: 16px
}

.goods-item .goods-card-container-crosswise._3-in-row .newStyle.pc-new-price-item {
  height: 22px !important
}

.goods-item .goods-card-container-crosswise._3-in-row._16_9-ratio .title-box {
  margin-bottom: 1px
}

.goods-item .goods-card-container-crosswise._3-in-row._16_9-ratio .pc-new-price-item {
  height: 23px !important
}

.goods-item .goods-card-container-crosswise._3-in-row._16_9-ratio .item-type__learn {
  height: 12px;
  line-height: 12px
}

.goods-item .goods-card-container-crosswise._3-in-row._3_2-ratio .pc-new-price-item {
  height: 22px !important
}

.bottom_info {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  margin-top: 12px
}

.bottom_info > div {
  text-align: var(--title-align) !important;
  justify-content: var(--flex-align)
}

.bottom_info .newStyle .marketing-info-prices_org + .marketing-info-prices_dis {
  margin-bottom: 1px
}

.MT-12 .item-type__learn {
  margin-top: 16px
}

.resource-type-type {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 2px 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: 2px;
  font-size: 12px;
  z-index: 9
}

.exam_stateWait {
  background-color: #ffa114
}

.exam_stateIng {
  background-color: #1472ff
}

.exam_stateEnd {
  background-color: #a2acb0
}

.item-type__info {
  margin-top: 4px;
  text-align: var(--title-align) !important
}

.item-type__info .info-count {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 18px;
  color: #999
}

.item-type__info .info-count .line {
  display: inline-block;
  width: 1px;
  height: 10px;
  margin: 0 4px;
  background-color: #ebebeb
}

.item-info-user {
  margin-top: 12px;
  display: flex
}

.item-info-user .user_avatar {
  display: flex;
  position: relative
}

.item-info-user .info-user_avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute
}
</style>